<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<!--<jk-report-button :permission-prefix="prefix" class="margin-5-0" :loading="exportLoading" @click="onReportBtn"></jk-report-button>-->
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.workshopId" :option-list="workshopList" placeholder="区域" size="small" class="search-bar-item-size2 margin-5-0 item-gap"></jk-select>
					<el-date-picker
						v-model="searchParams.belongDate"
						type="daterange"
						align="right"
						unlink-panels
						size="small"
						:clearable="false"
						class="item-gap"
						value-format="yyyy-MM-dd"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="onSearchBtn"
					></el-date-picker>
					<jk-select v-model="searchParams.groupId" :option-list="groupList" placeholder="班组" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.empNameOrCode" placeholder="员工名称" class="search-bar-item-size2 item-gap" @on-enter="onSearchBtn"></jk-search-input>
					<jk-search-input v-model="searchParams.machineNameOrCode" placeholder="机台编号或名称" class="search-bar-item-size2 item-gap" @on-enter="onSearchBtn"></jk-search-input>
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<jk-table :stripe="false" border :span-method="mergeColMethod" :loading="tableLoading" :data="tableData" :height="tableHeight + 20">
				<vxe-column title="人员" align="left" field="empName" :width="100">
					<template slot-scope="scope">
						<span style="font-size: 14px;font-weight: 700;">{{ scope.row.empName }}</span>
					</template>
				</vxe-column>
				<vxe-column title="日期" align="left" field="belongDate" :width="100" />
				<vxe-column title="班次" align="left" field="shiftName" :width="160">
					<template slot-scope="scope">
						<span>{{ `${scope.row.shiftName} (${scope.row.beginTime} ~ ${scope.row.endTime})` }}</span>
					</template>
				</vxe-column>
				<vxe-column title="班组" align="left" field="groupName" :width="110" />
				<vxe-column title="岗位" align="left" field="postName" :width="110" />
				<vxe-column title="看台时长" align="center" field="machineName" :width="400">
					<template slot-scope="scope">
						<working-hours-bar
							:max-val="maxHours"
							:data-list="scope.row.machineName"
						></working-hours-bar>
					</template>
				</vxe-column>
			</jk-table>
			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig, formatDate } from '/src/utils/jk/jk-tool';
    import { workforcemanagementScheduleEmpMachinePage } from '../../../api/schedule/scheduling';
    import jkProgress from '../../jk-components/jk-progress';
    import workingHoursBar from './components/working-hours-bar';
    export default {
        name: 'ScheduleShift',
        components: {
            workingHoursBar,
            jkProgress
        },
        mixins: [calHeight],
        data() {
            return {
                prefix: 'personnel:group',
                apiItem: {
                    'page': workforcemanagementScheduleEmpMachinePage
                },
                maxHours: 0,
                groupList: [],
                dataId: null,
                workshopList: [],
                tableLoading: true,
                exportLoading: false,
                tableData: [],
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    empNameOrCode: '',
                    groupId: null,
                    machineNameOrCode: '',
                    belongDate: [],
                    workshopId: null
                }
            };
        },
        mounted() {
            this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
            this.getDependentData();
        },
        methods: {
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            mergeColMethod({ row, _rowIndex, column, visibleData }) {
                const cellValue1 = row.empName;
                const cellValue2 = row.belongDate;
                const cellValue3 = row.shiftTypeName;
                const cellValue4 = row.shiftName;
                const cellValue5 = row.groupName;
                const cellValue6 = row.postName;
                if (cellValue1) {
                    const prevRow = visibleData[_rowIndex - 1];
                    let nextRow = visibleData[_rowIndex + 1];
                    if (column.property === 'empName') {
                        if (prevRow && prevRow[column.property] === cellValue1) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue1) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    } else if (column.property === 'belongDate') {
                        if (prevRow && prevRow[column.property] === cellValue2 && prevRow.empName === cellValue1) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue2 && nextRow.empName === cellValue1) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    } else if (cellValue2 && column.property === 'shiftTypeName') {
                        if (prevRow && prevRow[column.property] === cellValue3 && prevRow.belongDate === cellValue2 && prevRow.empName === cellValue1) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue3 && nextRow.belongDate === cellValue2 && nextRow.empName === cellValue1) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    } else if (cellValue2 && column.property === 'shiftName') {
                        if (prevRow && prevRow[column.property] === cellValue4 && prevRow.belongDate === cellValue2 && prevRow.empName === cellValue1 && prevRow.shiftTypeName === cellValue3) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue4 && nextRow.belongDate === cellValue2 && nextRow.empName === cellValue1 && nextRow.shiftTypeName === cellValue3) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    } else if (cellValue2 && column.property === 'groupName') {
                        if (prevRow && prevRow[column.property] === cellValue5 && prevRow.belongDate === cellValue2 && prevRow.empName === cellValue1 && prevRow.shiftTypeName === cellValue3 && prevRow.shiftName === cellValue4) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue5 && nextRow.belongDate === cellValue2 && nextRow.empName === cellValue1 && nextRow.shiftTypeName === cellValue3 && nextRow.shiftName === cellValue4) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    } else if (cellValue2 && column.property === 'postName') {
                        if (prevRow && prevRow[column.property] === cellValue6 && prevRow.belongDate === cellValue2 && prevRow.empName === cellValue1 && prevRow.shiftTypeName === cellValue3 && prevRow.shiftName === cellValue4 && prevRow.groupName === cellValue5) {
                            return { rowspan: 0, colspan: 0 };
                        } else {
                            let countRowspan = 1;
                            while (nextRow && nextRow[column.property] === cellValue6 && nextRow.belongDate === cellValue2 && nextRow.empName === cellValue1 && nextRow.shiftTypeName === cellValue3 && nextRow.shiftName === cellValue4 && nextRow.groupName === cellValue5) {
                                nextRow = visibleData[++countRowspan + _rowIndex];
                            }
                            if (countRowspan > 1) {
                                return { rowspan: countRowspan, colspan: 1 };
                            }
                        }
                    }
                }
            },
            async getDependentData() {
                this.tableLoading = true;
                // this.$set(this.searchParams, 'belongDate', [formatDate(Date.now() - 7 * 24 * 60 * 60 * 1000), formatDate(Date.now())]);
                this.$set(this.searchParams, 'belongDate', [formatDate(Date.now()), formatDate(Date.now())]);
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.groupList = this.$store.state.user.userGroup.groupList;
                this.$set(this.searchParams, 'groupId', this.$store.state.user.userGroup.defaultGroupId);
                await this.getListRequest();
                this.tableLoading = false;
            },
            onDetailBtn(e) {
                this.dataId = e.id;
                this.detailDialogState = true;
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                this.tableData = [];
                this.maxHours = 0;
                this.hoursList = [];
                return this.apiItem['page'](this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        if (res.data.res) {
                            res.data.res.forEach(empItem => {
                                empItem.scheduleList.forEach(sheduleItem => {
                                    sheduleItem.groupList.forEach(groupItem => {
                                        groupItem.empPostList ? groupItem.empPostList.forEach(postItem => {
                                            this.hoursList = [
                                                ...this.hoursList,
                                                ...postItem.scheduleEmpMachineList.map(x => x.workingHours)
                                            ];
                                            this.tableData.push({
                                                empName: empItem.empName,
                                                shiftTypeName: sheduleItem.shiftTypeName,
                                                shiftName: groupItem.shiftName,
                                                endTime: groupItem.endTime,
                                                beginTime: groupItem.beginTime,
                                                belongDate: sheduleItem.belongDate,
                                                groupName: groupItem.groupName,
                                                postName: postItem.postName,
                                                // machineName: postItem.scheduleEmpMachineList.map(x => x.machineName).join(' , '),
                                                machineName: postItem.scheduleEmpMachineList
                                            });
                                        }) : [];
                                    });
                                });
                            });
                            this.maxHours = Math.max(...this.hoursList);
                        }
                        this.totalCount = res.data.count;
                    }
                });
            }
        }
    };
</script>
